<template>
  <el-table stripe ref="multipleTable" :data="formData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" :header-cell-style="{ background: '#f2f2f2', color: '#333', fontWeight: 600, }" @select="selectChange" @select-all="selectAll">
  <!-- v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" -->
    <el-table-column type="selection" width="55" align = "center"> </el-table-column>
    <el-table-column label="资源名称" align = "left" width="210" show-overflow-tooltip>
      <template slot-scope="scope">
        <img :src="scope.row.img" style="width: 80px;height: 64px;margin-right: 10px;" @click="imgTop(scope.row)" loading="lazy">
        {{ scope.row.name }}
      </template>
    </el-table-column>
    <el-table-column label="分类" align = "center"> 
      <template slot-scope="scope">{{ scope.row.fname == null ? '--' : scope.row.fname  }}</template>
    </el-table-column>
    <el-table-column label="学科" align = "center" show-overflow-tooltip>
      <template slot-scope="scope">{{ scope.row.subject == '' && scope.row.tname == null ? '--' : scope.row.subject || scope.row.tname  }}</template>
    </el-table-column>
    <el-table-column label="年级" align = "center">
      <template slot-scope="scope">{{ scope.row.clas === '' ? '--' : scope.row.clas }}</template>
    </el-table-column>
    <el-table-column label="文件大小(M)" align = "center">
      <template slot-scope="scope">
        {{ scope.row.capacity == null ? '--' : scope.row.capacity }}
      </template>
    </el-table-column>
    <el-table-column label="上架状态" align = "center">
      <template slot-scope="scope" >
        <span class="scope_span1">{{ scope.row.status === 1 ? '● 已上架' : '' }}</span>
        <span class="scope_span2">{{ scope.row.status === 3 ? '● 未上架' : '' }}</span>
        <span class="scope_span3">{{ scope.row.status === 2 ? '● 已下架' : '' }}</span>
      </template>
    </el-table-column>
    <el-table-column label="安装量(台)" align = "center">
      <template slot-scope="scope">
        {{ scope.row.ci == null ? '--' : scope.row.ci }}
      </template>
    </el-table-column>
    <el-table-column label="累计学习时长" align = "center">
      <template slot-scope="scope">
        {{ scope.row.shi == 'NaN秒' ? '--' : scope.row.shi }}
      </template>
    </el-table-column>
    <el-table-column label="创建时间" align = "center">
      <template slot-scope="scope">{{ scope.row.createDate }}</template>
    </el-table-column>
    <el-table-column label="操作" align = "center">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row , 'details')" type="text" size="small">详情</el-button>
        <el-button class="unshelves" v-if="scope.row.status === 1" @click="handleClick(scope.row , '下架')" type="text" size="small" :disabled="!newDate.includes(scope.row)">下架</el-button>
        <el-button class="shelves" v-if="scope.row.status === 3" @click="handleClick(scope.row , '上架')" type="text" size="small" :disabled="!newDate.includes(scope.row)">上架</el-button>
        <el-button class="shelves" v-if="scope.row.status === 2" @click="handleClick(scope.row , '上架')" type="text" size="small" :disabled="!newDate.includes(scope.row)">上架</el-button>
        <!-- <el-button @click="handleClick(scope.row , 'delete')" type="text" size="small" :disabled="scope.row.status == 1">删除</el-button> -->
        <el-button class="delete" @click="handleClick(scope.row , 'delete')" type="text" size="small" :disabled="!newDate.includes(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    formData: {
      type: Array,
      default() {
        return null
      }
    },
    numBer: {
      type: Number,
      default() {
        return 0
      }
    },
    isDisabled: {
      type: Boolean,
      default() {
        return true
      }
    }
  },
  data() {
    return {
      newDate: [],
      loading: true,
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.$emit('handleSelectionChange',val)
    },
    handleClick(row , state) {
      this.$emit('operation' , row , state)
    },
    selectChange(selection, row) {
      this.newDate = selection;
      this.$emit('selectChange',row)
    },
    selectAll(selection) {
      this.newDate = selection;
    },
    imgTop(row){
      this.$emit('imgTopBig',row);
    }

    // handleSelect(selection, row) {  @select="handleSelect"
    //   console.log(selection, row)
    //   // this.$emit('handleSelect',selection, row)
    //   // selection.filter( item => {
    //   //   console.log(item)
    //   //   if(item.id === row.id){
    //   //     this.numBer == 0
    //   //   } else {
    //   //     this.numBer == 1
    //   //   }
    //   // })
    // }

  }
}
</script>

<style scoped>
.el-button.is-disabled{ color: #C0C4CC; }
.el-button--small{ font-size: 14px; }
.el-button--text{ color: #105CFB; }
.scope_span1{ font-weight: 600; color: #76b625; }
.scope_span2{ font-weight: 600; color: #333333; }
.scope_span3{ font-weight: 600; color: #7f7f7f; }
/* .shelves{ color: #71e2a3; }
.unshelves{ color: #ffba00; } */
.delete{ color: #ff9292; }
</style>
